<script setup>
import router from '@/router';
import { ref } from 'vue'
const isClick = ref(0)
const downLoad = (e) => {
  // 阻止a链接默认行为
  e.preventDefault()
  router.push('/download')
  isClick.value = 3
}
const about = (e) => {
  // 阻止a链接默认行为
  e.preventDefault()
  router.push('/about')
  isClick.value = 2
}
</script>

<template>
<nav class="nav navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
    <div class="nav-bar-image">
        <img class="nav-bar-img" src="../assets/logo.png" alt=""/>
    </div>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="nav-ul navbar-nav mb-2 mb-lg-0">
        <li class="nav-item">
          <a @click="isClick=0" :class="isClick==0?'active':''" class="navbar-brand" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a @click="isClick=1" :class="isClick==1?'active':''" class="navbar-brand" href="#">产品介绍</a>
        </li>
        <li class="nav-item">
          <a @click="about" :class="isClick==2?'active':''" class="navbar-brand" href="">关于我们</a>
        </li>
        <li class="nav-item">
          <a @click="downLoad" :class="isClick==3?'active':''" class="navbar-brand" href="">软件下载</a>
        </li>
      </ul>
    </div>
    </div>
</nav>
</template>

<style lang='scss' scoped>
.nav{
  width: 100%;
  height: 120px;
  background-color: #fff;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
  z-index: 9999;
}
    .nav-bar-image{
        display: flex;
        align-items: center;
        font-size: 24px;
        color: rgb(72,128,255);
        .nav-bar-img{
            width: 179px;
            height: 75px;
        }
    }
    .nav-ul{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      .nav-item a{
        &:hover{
          color: rgb(72,128,255) !important;
        }
      }
    }
    .nav-ul li{
      width: 153px;
      height: 35px;
      font-size: 24px;
      color: rgb(48,49,51);
      font-weight: 700;
    }
    .active{
      color: rgb(72,128,255) !important;
    }
</style>